<template>
	<div>
    <div class="vx-row ">
      <div class="vx-col w-full lg:w-1/4 mb-base">
        <statistics-card-line
          v-if="subscribersGained.analyticsData"
          icon="UsersIcon"
          :statistic="subscribersGained.analyticsData.subscribers | k_formatter"
          statisticTitle=""
          :chartData="subscribersGained.series"
          type='area' />
      </div>
      <div class="vx-col w-full lg:w-1/4 mb-base">
      <statistics-card-line
        v-if="revenueGenerated.analyticsData"
        icon="UsersIcon"
        :statistic="revenueGenerated.analyticsData.revenue | k_formatter"
        statisticTitle=""
        :chartData="revenueGenerated.series"
        color='success'
        type='area' />
      </div>

      <div class="vx-col w-full lg:w-1/4 mb-base">
        <statistics-card-line
          v-if="quarterlySales.analyticsData"
          icon="UsersIcon"
          :statistic="quarterlySales.analyticsData.sales"
          statisticTitle=""
          :chartData="quarterlySales.series"
          color='danger'
          type='area' />
      </div>
      <div class="vx-col w-full lg:w-1/4 mb-base">
        <statistics-card-line
          v-if="subscribersGained.analyticsData"
          icon="UsersIcon"
          :statistic="subscribersGained.analyticsData.subscribers | k_formatter"
          statisticTitle=""
          :chartData="subscribersGained.series"
          type='area' />
      </div>
    </div>
    <div class="vx-row ">
      <div class="vx-col w-full lg:w-1/2 mb-base">
        <vx-card title="系统评估">
          <!-- CARD ACTION -->
          <!--      <template slot="actions">-->
          <!--      </template>-->
          <!--      v-if="supportTracker.analyticsData"-->
          <div slot="no-body" v-if="supportTracker.analyticsData">
            <div class="vx-row text-center">

              <!-- Open Tickets Heading -->
              <div class="vx-col w-full lg:w-1/5 md:w-full sm:w-1/5 flex flex-col justify-between mb-4 lg:order-first md:order-last sm:order-first order-last">
                <div class="lg:ml-6 lg:mt-6 md:mt-0 md:ml-0 sm:ml-6 sm:mt-6">
                  <h1 class="font-bold text-5xl">{{ supportTracker.analyticsData.openTickets }}</h1>
                  <!--              <small>Tickets</small>-->
                </div>
              </div>

              <!-- Chart -->
              <div class="vx-col w-full lg:w-4/5 md:w-full sm:w-4/5 justify-center mx-auto lg:mt-0 md:mt-6 sm:mt-0 mt-6">
                <vue-apex-charts type=radialBar height=385 :options="analyticsData.supportTrackerRadialBar.chartOptions" :series="supportTracker.series" />
              </div>
            </div>

            <!-- Support Tracker Meta Data -->
            <div class="flex flex-row justify-between px-8 pb-4 mt-4">
              <p class="text-center" v-for="(val, key) in supportTracker.analyticsData.meta" :key="key">
                <span class="block">{{ key }}</span>
                <span class="text-2xl font-semibold">{{ val }}</span>
              </p>
            </div>
          </div>
        </vx-card>
      </div>

      <!-- LINE CHART -->
      <div class="vx-col w-full lg:w-1/2 mb-base">
        <vx-card title="均值比较">
          <template slot="actions">
            <feather-icon icon="SettingsIcon" svgClasses="w-6 h-6 text-grey"></feather-icon>
          </template>
          <div slot="no-body" class="p-6 pb-0">
            <div class="flex" v-if="revenueComparisonLine.analyticsData">
              <div class="mr-6">
                <p class="mb-1 font-semibold">平均值</p>
                <p class="text-3xl text-success">
                  <!--                  <sup class="text-base mr-1">$</sup>-->
                  {{ revenueComparisonLine.analyticsData.thisMonth.toLocaleString() }}</p>
              </div>
              <div>
                <p class="mb-1 font-semibold">设备值</p>
                <p class="text-3xl">
                  <!--                  <sup class="text-base mr-1">$</sup>-->
                  {{ revenueComparisonLine.analyticsData.lastMonth.toLocaleString() }}</p>
              </div>
            </div>
            <vue-apex-charts
              type=line
              height=266
              :options="analyticsData.revenueComparisonLine.chartOptions"
              :series="revenueComparisonLine.series" />
          </div>
        </vx-card>
      </div>



    </div>
    <div class="vx-row ">
        <div class="vx-col w-full lg:w-1/2 mb-base">
          <vx-card title="操作记录">
            <vx-timeline :data="timelineData" />
          </vx-card>
        </div>
    </div>
  </div>
</template>
<script>
  import { AirplayIcon } from 'vue-feather-icons'
  import VueApexCharts from 'vue-apexcharts'
  import analyticsData from '../ui-elements/card/analyticsData.js'
  import VxTimeline from "@/components/timeline/VxTimeline"
  import StatisticsCardLine from '@/components/statistics-cards/StatisticsCardLine.vue'
  export default {
    components:{VueApexCharts,VxTimeline,StatisticsCardLine,AirplayIcon},
    data() {
      return {
        revenueGenerated:{},
        subscribersGained: {},
        quarterlySales: {},
        ordersRecevied: {},
        revenueComparisonLine: {},

        timelineData: [
          {
            color: "success",
            icon: "PlusIcon",
            title: "添加水冷设备",
            desc: "admin:一楼添加水冷设备",
            time: "25 分钟前"
          },
          {
            color: "warning",
            icon: "PlusIcon",
            title: "设备检修",
            desc: "王勋:全楼设备检修",
            time: "15 天前"
          },
          {
            color: "primary",
            icon: "PlusIcon",
            title: "登录系统",
            desc: "admin:登录系统",
            time: "20 天前"
          },
          {
            color: "success",
            icon: "PlusIcon",
            title: "登录系统 ",
            desc: "",
            time: "25 天前"
          }
        ],
        analyticsData: analyticsData,
        supportTracker:{}
      }
    },
    created(){
      // 评估
      this.$http.get("/api/card/card-analytics/support-tracker")
        .then((response) => {
          console.log(response)
          this.supportTracker = response.data
        })
        .catch((error)   => { console.log(error) })

      // 小列表
      this.$http.get("/api/card/card-statistics/subscribers")
        .then((response) => { this.subscribersGained = response.data })
        .catch((error) => { console.log(error) })
      // Revenue Generated
      this.$http.get("/api/card/card-statistics/revenue")
        .then((response) => { this.revenueGenerated = response.data })
        .catch((error) => { console.log(error) })
      // Sales
      this.$http.get("/api/card/card-statistics/sales")
        .then((response) => { this.quarterlySales = response.data })
        .catch((error) => { console.log(error) })

      // Orders - Statistics
      this.$http.get("/api/card/card-statistics/orders")
        .then((response) => { this.ordersRecevied = response.data })
        .catch((error) => { console.log(error) })

      // Revenue Comparison
      this.$http.get("/api/card/card-analytics/revenue-comparison")
        .then((response) => { this.revenueComparisonLine = response.data })
        .catch((error) => { console.log(error) })

    }

  }
</script>
